<template>
  <div>
    <div class="RoleManage-header">角色管理</div>
    <div class="RoleManage-box">
      <div class="distribution-box-massage">
        <img src="../../../assets/image/sellerHub/error.png"
             alt=""
             width="16"
             height="16">
        提示：根据员工的职能选择角色,新增角色下的员工账号
      </div>
      <div class="RoleManage-box-div">
        <div>
          <div class="imgs"><img src=""
                 alt=""> </div>
          <p class="p-name">管理员</p>
          <p class="p-jieshao">管理员为企业或团队的负责人，可进行财务、运营、企业信息管理、员工管理等操作…</p>
          <p class="p-num">该角色目前已添加 <i>2</i>个账号</p>
          <div class="RoleManage-flaat">
            <a-icon type="ellipsis" />
            <div class="legalPerson">
              <li @click="clickpurview(1)">查看权限</li>
              <li @click="clickpurview(2)">配置权限</li>
              <li class="del-li">删除角色</li>
            </div>
          </div>
          <div class="RoleManage-bottom">
            <a-button @click="add()">添加账号
            </a-button>
            <a-button @click="del()"
                      class="reds">管理账号
            </a-button>
          </div>
        </div>
        <div class="zidingyi">
          <div class="imgs"><img src="../../../assets/image/tenantCenter/pic3.png"
                 alt=""> </div>
          <p class="p-name">自定义角色</p>
          <p class="p-jieshao">新增自定义角色，灵活管理平台权限</p>
          <div class="RoleManage-bottom">
            <a-button @click="add()"
                      type="danger">新增角色
            </a-button>
          </div>
        </div>

      </div>
    </div>

    <a-modal v-model="visible"
             width="428px"
             title="新增角色"
             :dialog-style="{ top: '30vh' }"
             ok-text="确认"
             cancel-text="取消"
             @ok="handleOk">
      <a-form-model ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="角色编码"
                               prop="bankName">
              <a-input v-model="form.bankName"
                       style="320px"
                       placeholder="请输入角色编码" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="角色名称"
                               prop="bankName">
              <a-input v-model="form.bankName"
                       style="320px"
                       placeholder="请输入角色名称" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="角色描述"
                               prop="bankName">
              <a-input v-model="form.bankName"
                       style="320px"
                       placeholder="请输入角色描述" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="权限配置"
                               prop="bankName">
              <span class="form-model-span">设置 <img src="../../../assets/image/tenantCenter/pic4.png"
                     alt=""
                     @click="clickpurview(2)"> </span>
            </a-form-model-item>
          </a-col>
        </a-row>

      </a-form-model>

    </a-modal>

    <purviewSetting ref="purviewSetting"
                    :visible="purviewStatus"
                    @billOK="purviewStatus = false"
                    @cancel="purviewStatus = false"></purviewSetting>

  </div>
</template>
<script>
import purviewSetting from "./components/purviewSetting";
export default {
  components: { purviewSetting },
  data () {
    return {
      visible: false,
      purviewStatus: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      form: {},
      rules: {
        bankName: [{ required: true, message: '请输入银行名称' }],
      }
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleOk () { },
    clickpurview () {
      this.purviewStatus = true
    },
  },
}
</script>
<style lang="less" scoped>
.RoleManage-header {
  width: 100%;
  height: 54px;
  background: #fff;
  line-height: 54px;
  color: @newColorGreyFontM;
  font-size: 16px;
  padding-left: 24px;
}
.RoleManage-box {
  margin: 16px;
  height: 720px;
  padding: 24px;
  background: #fff;
  .distribution-box-massage {
    width: 100%;
    height: 41px;
    line-height: 40px;
    padding-left: 25px;
    margin-bottom: 16px;
    color: @newColorGreyFontM;
    font-size: 12px;
    border: 1px solid rgba(255, 144, 3, 0.2);
    background: rgba(255, 144, 3, 0.06);
    img {
      vertical-align: sub;
      margin-right: 8px;
    }
    span {
      color: @activeRed;
    }
  }
  .RoleManage-box-div {
    > div {
      width: 284px;
      height: 301px;
      float: left;
      border-radius: 4px;
      box-shadow: 0px 0px 4px 0px rgba(39, 36, 36, 0.1);
      margin-right: 16px;
      position: relative;
      .imgs {
        width: 80px;
        height: 80px;
        margin: 20px auto 20px;
        background: #f8f8f8;
        border-radius: 100%;
        text-align: center;
        padding-top: 12px;
        img {
          width: 54px;
          height: 54px;
        }
      }
      .RoleManage-flaat {
        position: absolute;
        right: 9px;
        top: 9px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        cursor: pointer;
        .legalPerson {
          width: 72px;
          height: 0;
          background: #ffffff;
          border-radius: 2px;
          box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.08);
          position: absolute;
          z-index: 99;
          top: 26px;
          right: -9px;
          // opacity: 0;
          display: none;
          padding: 4px 0;
          li {
            list-style: none;
            width: 100%;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
          }
          .del-li {
            color: rgba(39, 36, 36, 0.3);
          }
          .del-li:hover {
            background: #fff;
          }
          li:hover {
            background: #fcefef;
          }
        }
        .legalPerson::after {
          position: absolute;
          right: 9px;
          top: -9px;
          content: "";
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 15px solid #fff;
          filter: drop-shadow(1px -3px 2px rgba(39, 36, 36, 0.06));
        }
      }
      .RoleManage-flaat:hover .legalPerson {
        opacity: 1;
        height: 92px;
        display: block;
      }
      .RoleManage-flaat:hover {
        background: #fcefef;
      }
      .p-name {
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        text-align: center;
      }
      .p-jieshao {
        font-size: 12px;
        color: rgba(39, 36, 36, 0.8);
        padding: 0 16px;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 16px;
      }
      .p-num {
        text-align: center;
        font-size: 12px;
        color: @newColorGreyFont;
        height: 16px;
        line-height: 16px;
        margin-bottom: 16px;
        i {
          font-style: normal;
          color: @activeRed;
        }
      }
      .RoleManage-bottom {
        height: 64px;
        border-top: 1px solid #f2f2f2;
        text-align: center;
        padding-top: 16px;
      }
    }
    > div:nth-child(4n) {
      margin-right: 0;
    }
    .zidingyi {
      .p-jieshao {
        margin-bottom: 66px;
      }
    }
  }
}
.form-model-span {
  font-size: 12px;
  color: @activeRed;
  img {
    width: 16px;
    height: 16px;
    vertical-align: sub;
    margin-left: 6px;
    cursor: pointer;
  }
}
/deep/ .ant-btn {
  width: 72px;
  height: 32px;
  line-height: 30px;
  padding: 0;
  text-align: center;
  font-size: 12px;
  border-radius: 2px;
  border: 1px soldi @newBorder;
}
/deep/ .reds.ant-btn {
  margin-left: 40px;
  border: 1px solid @activeRed;
  color: @activeRed;
}
/deep/ .ant-form label {
  font-size: 12px;
}
/deep/ .ant-form-item {
  margin-bottom: 10px;
}
</style>